<template>
  <el-form
    :model="form"
    :rules="rules"
    ref="form"
    :label-position="labelPosition"
    label-width="100px"
  >
    <el-row :gutter="24" class="pl80">
      <el-col>
        <h2>
          基本信息
          <el-button size="small" @click="handleShowHistory">历史信息</el-button>
        </h2>
      </el-col>
      <el-col :span="8">
        <el-form-item label="工号">
          <el-input :style="inputWidth" v-model="form.employeeId" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input :style="inputWidth" v-model="form.name" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身份证号">
          <el-input :style="inputWidth" v-model="form.idCard" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio
              v-for="(item,index) in sexArr"
              :key="index"
              :label="item.value"
            >{{ item.title }}</el-radio>
            <!-- <el-radio label="1">女</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="出生年月">
          <el-date-picker
            type="date"
            :style="inputWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="form.birth"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="民族">
          <el-select clearable :style="inputWidth" v-model="form.nation" placeholder="请选择">
            <el-option
              v-for="(item,index) in nationArr"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="婚姻状况">
          <el-select clearable :style="inputWidth" v-model="form.marryStatus" placeholder="请选择">
            <el-option
              v-for="(item,index) in marriageArr"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="8">
        <el-form-item label="参加工作时间">
          <el-date-picker
            type="date"
            :style="inputWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="form.workTime"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="进院时间">
          <el-date-picker
            type="date"
            :style="inputWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="form.timeWork"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>-->
      <el-col :span="8">
        <el-form-item label="手机号码" prop="phone">
          <el-input :style="inputWidth" v-model.number="form.phone" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="政治面貌">
          <el-select clearable :style="inputWidth" v-model="form.politicalStatus" placeholder="请选择">
            <el-option
              v-for="(item,index) in faceArr"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
          <!-- <el-input :style="inputWidth" v-model="form."  /> -->
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="家庭住址">
          <el-input :style="inputWidth" v-model="form.address" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="电子邮件">
          <el-input :style="inputWidth" v-model="form.email" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="技术职称">
          <el-input :style="inputWidth" v-model="form.jobTitle" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="入党时间">
          <el-date-picker
            type="date"
            :style="inputWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="form.partyDate"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="职级">
          <el-select clearable :style="inputWidth" v-model="form.dutyLevel" placeholder="请选择">
            <el-option
              v-for="(item,index) in levelArr"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="籍贯所在地">
          <el-select clearable :style="inputWidth" v-model="form.country" placeholder="请选择">
            <el-option
              v-for="(item,index) in originArr"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
          <!-- <el-input :style="inputWidth" v-model="form.country" /> -->
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="户口地">
          <el-input :style="inputWidth" v-model="form.householdPlace" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="银行账号" prop="bankCardId">
          <el-input :style="inputWidth" v-model.number="form.bankCardId" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="科室">
          <dept-select
            :selectValue="form.deptId"
            ref="deptSelect"
            :style="inputWidth"
            @select="e => handleDeptSelect(e, 'dept')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="岗位">
          <dept-position-s
            :style="inputWidth"
            :selectValue="form.positionId"
            ref="deptPositionS"
            @select="e => handleDeptSelect(e, 'position')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="职务">
          <el-select clearable :style="inputWidth" v-model="form.duty" placeholder="请选择">
            <el-option
              v-for="(item,index) in dutyArr"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="人事状态">
          <el-select clearable :style="inputWidth" v-model="form.personStatus" placeholder="请选择">
            <el-option
              v-for="(item,index) in personType"
              :key="index"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
          <!-- <el-input :style="inputWidth" v-model="form.email" /> -->
        </el-form-item>
      </el-col>
      <el-col class="tl-center">
        <el-button @click="handlePrint">打印</el-button>
        <el-button @click="handleUpdate" type="primary">修改</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import DeptSelect from '@/components/DeptSelect'
import DeptPositionS from '@/components/DeptPositionS'
import { setSession, getSession, removeSession, getDicData, openNotification, serviceParam } from '@/utils/util'
import { updateUserInfo } from '@/api/archives'
export default {
  components: {
    DeptSelect,
    DeptPositionS
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('手机号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('手机号码输入数字'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('手机号码格式不正确'))
          }
        }
      }, 100)
    }
    return {
      form: {},
      labelPosition: 'right',
      inputWidth: {
        width: '80%'
      },
      rules: {
        phone: [{ type: 'number', validator: checkPhone, trigger: 'blur' }],
        bankCardId: [{ type: 'number', message: '请输入数字', trigger: 'blur' }]
      },
      userRow: null,
      sexArr: [],
      marriageArr: [],
      nationArr: [],
      originArr: [],
      faceArr: [],
      personType: [],
      dutyArr: [],
      levelArr: []
    }
  },
  methods: {
    handleUpdate() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await updateUserInfo(this.form)
          if (res.state === '000000') {
            // openNotification('success', '')
            this.$alert('修改操作成功，请等待审核通过后数据更新', {
              confirmButtonText: '确定'
            })
          }
        }
      })
    },
    handleDeptSelect(value, type) {
      if (type === 'dept') {
        this.$set(this.form, 'deptId', value.key)
      } else {
        this.$set(this.form, 'positionId', value.key)
      }
    },
    handlePrint() {
      let obj = serviceParam('serverUrl')
      let uri = process.env.NODE_ENV === 'production' ? obj.paraValue : 'http://192.168.14.2:8888/'
      window.open(uri + 'ureport/preview?_u=2:user_info&userId=' + this.userRow.userId)
    },
    handleShowHistory() {
      this.$emit('showHistory', 'basic')
    }
  },
  created() {
    this.sexArr = getDicData('001', '001007')
    this.marriageArr = getDicData('001', '001005')
    this.nationArr = getDicData('001', '001004')
    this.originArr = getDicData('001', '001001')
    this.faceArr = getDicData('001', '001006')
    this.personType = getDicData('001', '001013')
    this.dutyArr = getDicData('001', '001008')
    this.levelArr = getDicData('001', '001009')
    console.log('userRow', this.userRow)
    this.userRow = null
    if (this.$route.query.userRow) {
      this.userRow = JSON.parse(this.$route.query.userRow)
    } else if (this.$route.query.leaderRow) {
      this.userRow = JSON.parse(this.$route.query.leaderRow)
    }
    if (this.userRow) {
      setSession('userRow', this.userRow)
    } else {
      this.userRow = getSession('userRow')
    }
    this.form = Object.assign({}, this.userRow)
  }
}
</script>
